<template>
	<view class="">
		<view class="uni-pop-rich wrapper" v-show="!calendarShow">
			<!-- 分类 - 单选 -->
			<view class="wrapper-child-left">
				<picker style="color: rgb(115 185 45);height: 42px;border-radius: 20px;width: 90%;text-align:center;line-height: 42px;background: white;"
				 @change="bindPickerChange" :value="index" :range="options">
					<view class="uni-input">{{options[index]}}</view>
				</picker>
			</view>
			<!--金额 -->
			<view class="wrapper-child-right">
				<input class="input input-box" v-model="firstInput_" placeholder="消费金额" type="digit"></input>
			</view>
			<!--日期 -->
			<view class="wrapper-child-left">
				<view class="selector" @click="showCalendar" style="width: 90%;height: 42px;line-height: 42px;border:0px;">
					<image class="icon" src="@/static/images/agenda.png" mode="aspectFit"></image>
					<text class="medium s-text">{{shortDate}}</text>
				</view>
			</view>
			<!--备注 -->
			<view class="wrapper-child-right">
				<input class="input input-box" v-model="secondInput_" placeholder="备注, 如: 早餐"></input>
			</view>
			<!-- 账单 - 复选 -->
			<view class="wrapper-child-left">
				<picker style="color: rgb(115 185 45);height: 42px;border-radius: 20px;width: 90%;text-align:center;line-height: 42px;background: white;"
				 @change="bindPickerChange2" :value="index2" :range="options2">
					<view class="uni-input">{{options2[index2]}}</view>
				</picker>
			</view>
			<!-- 确认按钮 -->
			<button class="btn wrapper-child-right" @click="confirm">确认</button>
		</view>
		<!--日历 -->
		<uni-calendar :date="date_" :showMonth="false" :insert="true" v-show="calendarShow" ref="calendar" @change="changeDate" />
	</view>
</template>

<script>
	import hxdDropMenu from '@/components/hxd-drop-menu.vue'
	import hxdMenu from '@/components/hxd-menu.vue'
	import {
		dateUtils
	} from '@/common/util.js'
	export default {
		name: 'UniPopupRich',
		components: {
			hxdDropMenu,
			hxdMenu
		},
		created() {
			this.options.forEach((it, inx) => {
				if (it === this.billtype) {
					this.index = inx;
				}
			})
			this.options2.forEach((it, inx) => {
				if (it === this.szlx) {
					this.index2 = inx;
				}
			})
			this.firstInput_ = this.firstInput;
			this.secondInput_ = this.secondInput;
			this.date_ = this.date;
		},
		props: {
			title: {
				type: String,
				default: "添加一条数据"
			},
			options: {
				type: Array,
				default: function() {
					return [];
				}
			},
			firstInput: {
				type: Number,
				default: "消费金额"
			},
			secondInput: {
				type: String,
				default: "备注：如聚餐"
			},
			date: {
				type: String,
				default: "2020-07-19"
			},
			billtype: {
				type: String
			},
			billid: {
				type: String,
				default: ''
			},
			szlx: {
				type: String
			},
			options2: {
				type: Array,
				default: function() {
					return [];
				}
			}
		},
		inject: ['popup'],
		data() {
			return {
				item: {},
				obj: {
					id: '99',
					time: '2020-07-11',
					reason: {
						id: 1,
						reason: '交通',
						icon: '../../static/images/categories/c-transport.png',
					},
					money: '0',
					note: '',
				},
				calendarShow: false,
				index: 0,
				index2: 0,
				firstInput_:'',
				secondInput_:'',
				date_:''
			}
		},
		computed: {
			shortDate() {
				return dateUtils.format_short(this.date_);
			}
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.target.value;
			},
			bindPickerChange2(e) {
				this.index2 = e.target.value;
			},
			handleClick(e) {
				console.log(e);
			},
			/**
			 * 定义的选择事件，选择内容后触发
			 */
			select(item, index) {
				// 将事件发送到页面，在页面进行监听
				this.$emit('select', {
					item,
					index
				}, () => {
					// 延迟操作，执行父组件的close事件，关闭弹出层
					this.popup.close()
				})
			},
			confirm() {
				this.$http.get('/bills/saveOrUpdate?id=' + this.billid + "&type=" + this.options[this.index] + "&je=" + this.firstInput_ +
					"&rq=" + this.date_ + "&remark=" + this.secondInput_ + "&szlx=" + this.options2[this.index2] + 
					"&username=" + this.username).then(res => {
					this.$emit('confirm');
					this.popup.close();
				});
			},
			selectReason(index) {
				this.index = index;
				this.item.reason = this.reasons[index];
				// this.$emit("update", this.item);
			},
			showCalendar() {
				this.calendarShow = !this.calendarShow;
				this.$refs.calendar.open()
			},
			changeDate(e) {
				this.date_ = e.fulldate;
				// this.$emit("update", this.item)
				this.showCalendar();
				this.$refs.calendar.close()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-pop-rich {
		height: 440rpx;
		width: 750rpx;
		background-color: #8ec756;
		padding-top: 58rpx;
		padding-bottom: 58rpx;
		box-sizing: border-box;
	}

	.wrapper {
		display: flex;
		flex-direction: row;
		width: 750rpx;
		align-content: flex-start;
		flex-flow: wrap;
	}

	.wrapper-child-left,
	.wrapper-child-right {
		box-sizing: border-box;
		height: 88rpx;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.wrapper-child-left {
		width: 39%;
	}

	.wrapper-child-right {
		width: 61%;
	}


	.selector {
		position: relative;
		display: flex;
		flex-direction: row;
		width: 250rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		border-style: solid;
		border-radius: 44rpx;
		line-height: 88rpx;
	}

	.selector-top {
		transition: .5s;
		border-top-left-radius: 44rpx;
		border-top-right-radius: 44rpx;
	}

	.selector-top-none {
		transition: .4s;
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.catesShow {
		position: absolute;
		border-top-right-radius: 44rpx;
		border-top-left-radius: 44rpx;
		transition: all .4s ease;
		height: 560rpx;
		background-color: #ffffff;
		bottom: 88rpx;
		display: flex;
		width: 250rpx;
		overflow: hidden;
		flex-direction: column;
	}

	.cates {
		border-top-right-radius: 44rpx;
		border-top-left-radius: 44rpx;
		transition: all .4s ease;
		height: 0rpx;
		bottom: 88rpx;
		display: flex;
		width: 250rpx;
		overflow: hidden;
		flex-direction: column;
	}

	.icon {
		height: 32rpx;
		width: 32rpx;
		margin-top: 28rpx;
		margin-left: 40rpx;
		margin-right: 16rpx;
	}

	.n-text {
		font-size: 32rpx;
		color: #333333;
	}

	.input {
		width: 410rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		align-items: center;
		line-height: 88rpx;
	}

	.input-box {
		width: 410rpx;
		height: 88rpx;
		// display: none;
		color: #73B92D;
	}

	.input-text {}

	.unit {}

	.small {
		font-size: 28rpx;
	}

	.medium {
		font-size: 32rpx;
	}

	.s-text {
		color: #73B92D;
	}

	.btn {
		width: 410rpx;
		height: 88rpx;
		background-color: #73B92D;
		border-radius: 88rpx;
		color: #ffffff;
		font-size: 32rpx;
	}

	.btn ::hover {
		background-color: #3e7c00;
	}

	.calendar {
		position: absolute;
		z-index: 999;
	}
</style>
